<template>
    <div class='head'>
        <div style='position: absolute; top: 22%; width: 608px;left: 12%;'>
            <!-- <h1 style='color: var(--el-color-primary);'>Huai Xun</h1>
            <div class="desc">后台管理系统，方便快捷的管理学员查看学习成绩，一目了然查看每位学员当前学习情况，课程安排，技能培训，教官课程，信息通知!</div> -->
        </div>
        <!-- <div class='head-left'>
            <img src='../assets/login.png' style='width: 60%; height: 41%;' />
        </div> -->
        <img src="../assets/topsize.png" style="width: 658px;  height: 83px; position: fixed; top: 17px;left: 36px;"/>
        <div class='head-right'>
            <img src="../assets/policeinsignia.png" style="width: 140px; height: 140px; position: fixed; top: 31%; left: 50%; transform: translate(-50%, -50%);"/>
            <div class='head-right-content'>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="账号登陆" name="first">
                        <p style="margin-top: 10px;">警号</p>
                        <el-input v-model="userName" style="width: 100%; height: 42px; margin-top:10px;" placeholder="请输入账号" />
                        <p style="margin-top: 10px;">密码</p>
                        <el-input v-model="password" show-password style="width: 100%; height: 42px; margin: 10px 0px;" placeholder="请输入密码" />
                    </el-tab-pane>
                    <!-- <el-tab-pane label="" name="second">
                        手机号登陆
                    </el-tab-pane> -->
                </el-tabs>
                <el-button type="success" @click='landing()' style='width: 100%; height: 41px; font-size: 20px;'>登陆</el-button>
                <div style="display:flex;justify-content: flex-end;margin-top: 20px;">
                    <p @click="forget()">忘记密码</p>
                </div>
            </div>
        </div>
        <P style="font-weight: 400;font-size: 20px;color: #FFFFFF; line-height: 43px; text-align: center; position: fixed; bottom: 0px; left: 35%;">Copyright © 2021 - 2024 河南怀讯信息技术有限公司. All Rights Reserved.</P>
    </div>
</template>
<script>
export default {
   components: {},
    data() {
        return {
            activeName:'first',
            userName:'',
            password:'',
        };
   },
//监听属性 类似于data概念
    computed: {},
//监控data中的数据变化
    watch: {},
//方法集合
    methods: {
        landing(){
            if(this.userName == ''){
                this.$message({
                    message: '请输入用户名',
                    type: "error",
                });
                return
            }
            if(this.password == ''){
                this.$message({
                    message: '请输入密码',
                    type: "error",
                });
                return
            }
            let param = {
                "police_id": this.userName,
                "password": this.password
            }
            this.$store.dispatch('landing',param)
            // this.$message({
            //     message: '登陆有效试卷一小时',
            //     type: 'success',
            // })
        },
        forget(){
            this.$message({
                message: '请联系教官',
                type: "warning",
            });
        }
    },
//生命周期 - 创建完成（可以访问当前this实例）
    created() {
    },
//生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        let _this = this
        document.addEventListener('keyup', function(event) {
            if (event.keyCode === 13) {
                _this.landing()
            }
        });
    },
    //生命周期 - 创建之前 
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    // 生命周期 - 更新之前 
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
}
</script>
<style  scoped>
.desc{
    color: rgb(113, 115, 112);
    line-height: 32px;
    padding: 15px 0;
}
.head-right{
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.head-right-content{
    width: 423px;
    height: 376px;
    background-color: #fff;
    flex: 0 1 auto;
    padding: 40px;
    border-radius: 6px;
    box-shadow: 1px 1px 8px #aaa6a6;
    box-sizing: border-box;
}
.head-left{
    width:60%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.head{
    width:100%;
    height:100%;
    display:flex;
    background-image: url('../assets/police.png');
    background-size: 100% 100%;
}
</style>
<!-- ------------------------------------------上边不能删除后边又用------------------------------------------- -->













<!-- <template>
    <div class='head'>
        <video muted autoplay="autoplay" loop="loop" style="position: absolute; width: 100%; height: 100%; object-fit: fill">
            <source src="../assets/beijing.mp4" type="video/mp4"></source>
        </video>
        <div style="position: absolute;
                        left: 3%;
                        top: 0%;
                        display: flex;
                        justify-content: center;
                        color: rgb(255, 255, 255);
                        margin-top: 23px;
                        align-items: center;">
            <img src="../assets/policeinsignia.png" style="width: 78px; height: 78px; margin-right: 27px;">
            <h1 style="font-size: 35px;">焦作市公安局小案快破中心应用系统</h1>
        </div>
        <div class="login">
            <div style="display: flex; justify-content: center;">
                <img src="../assets/policeinsignia.png" style='width: 70px; height: 70px;' alt="">
            </div>
            <div class="userpws">
                <p>用户名:</p>
                <el-input v-model="input" style="width: 240px" placeholder="请输入用户名" />
            </div>
            <div class="userpws">
                <p>密&nbsp;&nbsp; 码:</p>
                <el-input
                    v-model="inputPws"
                    style="width: 240px"
                    type="password"
                    placeholder="请输入密码"
                    show-password
                />
            </div>
            <div style='display: flex; justify-content: flex-end; color: #FFF;padding-right: 12%;margin-top: 5px;' @click="Pawsword()">
                <p>忘记密码?</p>
            </div>
            <div style="display: flex; justify-content: center; margin-top: 5%;">
                <el-button type="primary" style="width: 80%;">账户登陆</el-button>
            </div>
            <div style="display: flex; justify-content: center; margin-top: 15px;">
                <el-button type="warning" style="width: 80%;">证书登陆</el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
   components: {},
    data() {
        return {
            input:'',
            inputPws:'',
        };
   },
//监听属性 类似于data概念
    computed: {},
//监控data中的数据变化
    watch: {},
//方法集合
    methods: {
        Pawsword(){
            // alert("请联系管理员！")

        }
    },
//生命周期 - 创建完成（可以访问当前this实例）
    created() {
    },
//生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    //生命周期 - 创建之前 
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    // 生命周期 - 更新之前 
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
}
</script>
<style  scoped>
.userpws p{
    width: 64px;
    display: flex;
    justify-content: right;
    margin-right: 20px;
}
.userpws{
    display: flex;
    color: #FFF;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    padding-right: 26px;
}
.login{
    width: 28%;
    height: 40%;
    position: absolute;
    left: 37%;
    top: 20%;
    background-image: url('../assets/login.png');
    background-size: 100% 100%;
    padding-top: 2%;
}
.head{
    width: 100%;
    height: 100%;
}
</style> -->